<template>
	<view class="user">
		<view class="top-background"></view>
		<view class="user-top" @click="handleEditClick">
			<view class="left">
			<image :src="userInfo.avatar"></image>
			<view class="user-right">
				<view class="name">
					{{ userInfo.name }}
				</view>
				<view class="num">
					交易{{ userInfo.now_role==1?userInfo.user_order_nums:userInfo.driver_order_nums }}次
				</view>
			</view>
			</view>
			<image v-if="userInfo.now_role == 2 && userInfo.deposit_level" style="width: 120rpx;" mode="widthFix" :src="userInfo.deposit_level"></image>
		</view>
		<view class="line-list">
			<view class="line" v-for="(item, index) in lineList" :key="index" @click="navigateToPage(item.path)">
				<view class="left">
					<image :src="item?.icon"></image>
					<view class="title">{{ item?.title }}</view>
				</view>
				<image class="right" mode="widthFix" src="@/static/image/right.png"></image>
			</view>
		</view>
		<up-button v-if="userInfo.driver_auth == 1" @click="ChangeRole" type="primary"
			:text="`切换到${userInfo.now_role!=1?'用户':'司机'}端`"></up-button>
		<view class="" style="margin-top: 30rpx;">
			<up-button @click="handleOutLogin" type="primary" text="退出登录"></up-button>
		</view>
		<InApplication ref="InApplicationRef" />
	</view>
</template>

<script setup>
	import InApplication from './components/in_application.vue'
	import {
		ref,
		onMounted,
		computed
	} from 'vue'
	import {
		onShow
	} from '@dcloudio/uni-app'
	import {
		useUserStore,
		useTripStore
	} from '@/store/index.js'
	import utils from '@/utils/util.js'
	import user from '@/api/user.js'
	onMounted(() => {
		selfInfo()
	})
	onShow(() => {
		selfInfo()
		useTripStore().setDetail({})
	})
	const userInfo = ref({})
	const selfInfo = async () => {
		const {
			status,
			info,
			data
		} = await user.selfInfo()
		if (status == 1) {
			userInfo.value = data
			uni.setStorageSync('userInfo', data)
			useUserStore().setRole(data.now_role)
			setLineList()
			if (data.now_role == 2) {
				useUserStore().changeLocation()
			} else {
				useUserStore().clearLocationInterval()
			}
		}
	}
	const setLineList = () => {
		lineList.value = line.filter(item => {
			if (item.type == userInfo.value.now_role) return item
			if (!item.type) return item
		})
	}
	const line = [{
		title: '我的订单',
		icon: '../../static/user/icon1.png',
		path: '/pages/user/order_list'
	}, {
		title: '成为司机',
		icon: '../../static/user/icon2.png',
		path: '/pages/user/become_driver',
		type: 1
	}, {
		title: '我的钱包',
		icon: '../../static/user/icon3.png',
		path: '/pages/user/purse'
	}, {
		title: '我的保证金',
		icon: '../../static/user/icon6.png',
		path: '/pages/user/earnest_money',
		type: 2
	}, {
		title: '联系客服',
		icon: '../../static/user/icon4.png',
		path: '/pages/user/service'
	}, {
		title: '关于我们',
		icon: '../../static/user/icon5.png',
		path: '/pages/user/about'
	}]
	const lineList = ref([])
	const InApplicationRef = ref()
	const navigateToPage = (path) => {
		if (path == '/pages/user/become_driver') {
			applyDriverStatus()
			return
		}
		uni.navigateTo({
			url: path
		});
	}
	const applyDriverStatus = async () => {
		const {
			status,
			info,
			data
		} = await user.applyDriverStatus()
		console.log(status, info, data);
		if (data.apply_status == 1) {
			InApplicationRef.value.handleClick()
		} else if (data.apply_status == 2) {
			utils.toast('审核通过')
		} else {
			uni.navigateTo({
				url: '/pages/user/become_driver'
			});
		}
	}
	const handleEditClick = () => {
		uni.navigateTo({
			url: '/pages/user/edit_info'
		})
	}
	const ChangeRole = async () => {
		const now_role = userInfo.value.now_role == 1 ? 2 : 1
		const {
			status,
			info,
			data
		} = await user.editSelfInfo({
			now_role: now_role
		})
		if (status == 1) {
			selfInfo()
			userInfo.value.now_role = now_role
			useUserStore().setRole(now_role)
			// setLineList()
			if (now_role == 2) {
				useUserStore().changeLocation()
			} else {
				useUserStore().clearLocationInterval()
			}
		}
	}
	const handleOutLogin = () => {
		uni.clearStorageSync()
		useUserStore().clearLocationInterval()
		uni.redirectTo({
			url: '/pages/login/index'
		})
	}
</script>

<style lang="scss" scoped>
	.user {
		.user-top {
			position: relative;
			z-index: 10;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 28rpx;

			.left {
				display: flex;
				align-items: center;
				width: calc(100% - 150rpx);
				
				image {
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
					margin-right: 16rpx;
				}
			}

			.user-right {
				width: calc(100% - 136rpx);

				.name {
					font-family: PingFang SC, PingFang SC;
					font-weight: 600;
					font-size: 32rpx;
					color: #FFFFFF;
					line-height: 38rpx;
				}

				.num {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #FFFFFF;
					line-height: 33rpx;
					margin-top: 20rpx;
				}
			}
		}

		.line-list {
			width: calc(100% - 56rpx);
			margin: 40rpx auto;
			background: #fff;
			padding: 20rpx;
			box-sizing: border-box;
			box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(128, 128, 128, 0.06);
			border-radius: 32rpx;

			.line {
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid #f6f6f6;
				padding: 34rpx 10rpx;

				.left {
					display: flex;
					align-items: center;

					image {
						width: 38rpx;
						height: 38rpx;
						margin-right: 10rpx;
					}

					.title {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #2C1F21;
						line-height: 33rpx;
					}
				}

				.right {
					width: 13rpx;
				}
			}

			.line:last-child {
				border: 0;
			}
		}

		::v-deep .u-button {
			width: 85%;
			height: 100rpx;
			font-weight: 600;
		}
	}
</style>